<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 折叠效果</title>
<style>
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="150"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 绘制矩形A
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 50, 100);

    // 绘制矩形B
    ctx.fillStyle = 'green';
    ctx.fillRect(50, 0, 50, 100);

    // 绘制折叠线
    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(25, 0);
    ctx.lineTo(25, 100);
    ctx.stroke();

    // 绘制第二次折叠线
    ctx.beginPath();
    ctx.moveTo(75, 0);
    ctx.lineTo(75, 100);
    ctx.stroke();

</script>
</body>
</html>
